<template>
  <view>
    <block v-for="(weeks, week) in canlender.weeks" :key="week">
      <view class="uni-calender__body-date-week">
        <block v-for="(day, index) in weeks" :key="index">
          <view
            class="uni-calender__date"
            :class="{
							'uni-calender__disable': canlender.month !== day.month || day.disable,
							'uni-calender__date-current':
								(day.date == canlender.date || day.checked) &&
								canlender.month == day.month &&
								!day.disable,
							'uni-calender__lunar': lunar,
							'uni-calender__active': day.isDay,
							'uni-calender__is-day': day.isDay
						}"
            @tap="
							selectDays(
								week,
								index,
								canlender.month === day.month,
								day.disable,
								canlender.lunar
							)
						"
          >
            <view class="uni-calender__circle-box">
              {{ day.date }}
              <view v-if="lunar" class="uni-calender__lunar">{{ day.lunar }}</view>
              <view v-if="day.have" class="uni-calender__data-circle"></view>
            </view>
          </view>
        </block>
      </view>
    </block>
  </view>
</template>

<script>
/* eslint-disable */
export default {
  name: "uni-calendar-item",
  props: {
    /**
     * 当前日期
     */
    canlender: {
      type: null,
      default: () => {
        return {};
      }
    },
    lunar: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {};
  },
  created() {},
  methods: {
    selectDays(week, index, ischeck, isDay, lunar) {
      this.$emit("selectDays", {
        week,
        index,
        ischeck,
        isDay,
        lunar
      });
    }
  }
};
</script>

<style lang="scss">
.uni-calender__body-date-week {
  display: flex;
  width: 100%;
  border-bottom: 1px #f5f5f5 solid;

  &:last-child {
    border: none;
  }

  // 日期的样式
  .uni-calender__date {
    position: relative;
    width: 100%;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #000;
    background: #fff;
    // line-height: 100upx;
    box-sizing: border-box;
    padding: 20upx 0;
    line-height: 1.5;

    .uni-calender__lunar {
      font-size: 20upx;
      color: #000;
    }

    .uni-calender__circle-box {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 80upx;
      height: 80upx;
      flex-shrink: 0;
      border-radius: 50%;
      transition: all 0.2s;
    }

    &.uni-calender__lunar {
      // 			padding: 20upx 0;
      // 			line-height: 1.5;
    }

    // 本月禁止的样式
    &.uni-calender__disable {
      color: #d4d4d4;

      .uni-calender__lunar {
        color: #d4d4d4;
      }
    }

    &.uni-calender__is-day {
      color: #fd2e32;
    }

    &.uni-calender__is-day .uni-calender__lunar {
      color: #fd2e32;
    }

    // 当前选中
    &.uni-calender__date-current {
      // background: #000;
      color: #fff;
      box-sizing: border-box;

      .uni-calender__circle-box {
        background: #fd2e32;
      }

      &.uni-calender__active {
      }

      .uni-calender__lunar {
        color: #fff;
      }
    }

    .uni-calender__data-circle {
      position: absolute;
      // bottom: 10rpx;
      top: 10upx;
      right: 10upx;
      // margin: auto;
      width: 10rpx;
      height: 10rpx;
      border-radius: 50%;
      background: #ff5a5f;
      z-index: 2;
    }
  }
}
</style>
